<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="get">获取</button>
    <button class="set">设置</button>
    <!-- action  数据提交的地址-->
    <!-- method  数据提交的方式(get post)-->
    <!-- 以get方式提交数据时,会将参数数据队列提交到action所指的url,和url以?拼接 -->
    <form action="" method="get">
        <div class="input-group">
            <label for="user">用户名:</label>
            <input type="text" id="user" name="user">
        </div>
        <div class="input-group">
            <label for="">密&emsp;码:</label>
            <input type="text" name="pwd">
        </div>
        <div class="input-group">
            <input type="submit" value="提交">
            <input type="reset" value="重置">
        </div>
    </form>
    <div>
        锚点:
        <a href="#one">link_01</a>
        <a href="#two">link_01</a>
    </div>
</body>
<!-- 
    url组成

    https://www.baidu.com:443/index.html?a=1&b=2#one
    协议 + 域名 + 端口 + 文件路径 + 参数数据 + 锚点

 -->
<script>
    // location    地址栏对象(存储和地址栏url相关的信息)

    console.log(location);

    // 属性
    // location对象的属性
    //     protocol     获取和设置(取值和赋值)协议

    //     hostname     获取和设置域名或主机名
    //     host         获取和设置域名和端口
    //     origin       获取和设置   协议 域名 和 端口

    //     port         获取和设置端口部分

    //     pathName     获取和设置 url的路径部分

    //     search       获取和设置 url的参数数据部分
    //     hash         获取和设置 hash值(url锚点部分) 

    //     href         获取和设置(取值和赋值)当前窗口的url地址

    // 方法
    // reload()       页面重载(刷新)


    var get = document.querySelector(".get");
    var set = document.querySelector(".set");

    get.onclick = function () {
        console.log(location.protocol);
        console.log(location.hostname);
        console.log(location.host);
        console.log(location.origin);
        console.log(location.port);
        console.log(location.pathname);
        console.log(location.search);
        console.log(location.hash);
        console.log(location.href);
    }

    set.onclick = function () {
        // location.protocol = "https:";
        // location.hostname = "localhost"
        // location.host = "localhost:1234"
        // location.port = "5678";
        // location.pathname = "/day13/html/03 吸顶效果.html"
        // location.search = "?a=1&b=2"
        // location.hash = "#one";

        // 页面跳转  => 当前窗口跳转
        // location.href = "https://www.baidu.com";
        // location.href = "./03 吸顶效果.html";


        location.reload();



    }



</script>

</html>